<template>
    <view class="uni-tab-bar">
        <scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
            <view v-for="(tab,index) in tabBars" :key="tab.id" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
                  :id="tab.id" :data-current="index" @click="tapTab">{{tab.name}}</view>
        </scroll-view>
        <swiper :current="tabIndex" class="swiper-box" :duration="300" @change="changeTab" v-if="hasLogin">
            <swiper-item v-for="(tab,index1) in newsitems" :key="index1">
                <scroll-view class="list" scroll-y @scrolltolower="loadMore(index1)">
                    <block v-for="(newsitem,index2) in tab.data" :key="index2">
                        <media-list :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
                    </block>
                    <view class="uni-tab-bar-loading">
                        {{tab.loadingText}}
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
        <view class="btn-row">
            <button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
            <button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
        </view>
        <!--倒计时 20190624-->
        <!--<uni-countdown :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF"
                       background-color="#00B26A" border-color="#00B26A" />-->
    </view>
</template>
<script>
    import mediaList from '@/components/tab-nvue/mediaList.vue';
    import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'

    import {
        mapState,
        mapMutations
    } from 'vuex'

    const tpl = {
        data0: {
            "datetime": "40分钟前",
            "article_type": 0,
            "title": "uni-app行业峰会频频亮相，开发者反响热烈!",
            "source": "DCloud",
            "comment_count": 639
        },
        data1: {
            "datetime": "一天前",
            "article_type": 1,
            "title": "DCloud完成B2轮融资，uni-app震撼发布!",
            "image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
            "source": "DCloud",
            "comment_count": 11395
        },
        data2: {
            "datetime": "一天前",
            "article_type": 2,
            "title": "中国技术界小奇迹：HBuilder开发者突破200万",
            "image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
            "source": "DCloud",
            "comment_count": 11395
        },
        data3: {
            "article_type": 3,
            "image_list": [{
                "url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
                "width": 563,
                "height": 316
            }, {
                "url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
                "width": 641,
                "height": 360
            }, {
                "url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
                "width": 640,
                "height": 360
            }],
            "datetime": "5分钟前",
            "title": "uni-app 支持使用 npm 安装第三方包，生态更趋丰富",
            "source": "DCloud",
            "comment_count": 11
        },
        data4: {
            "datetime": "2小时前",
            "article_type": 4,
            "title": "uni-app 支持原生小程序自定义组件，更开放、更自由",
            "image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
            "source": "DCloud",
            "comment_count": 69
        }
    };

    export default {
        components: {
            mediaList,
            uniCountdown
        },
        computed: {
            ...mapState(['hasLogin', 'forcedLogin'])
        },
        data() {
            return {
                scrollLeft: 0,
                isClickChange: false,
                tabIndex: 0,
                newsitems: [],
                tabBars: [{
                    name: '关注',
                    id: 'guanzhu'
                }, {
                    name: '历史',
                    id: 'lishi'
                }, {
                    name: '本地',
                    id: 'bendi'
                }]
            }
        },
        onLoad() {
            this.newsitems = this.randomfn()
            console.log(this.newsitems)
            // console.log(this.websiteUrl)
        },
        methods: {
            ...mapMutations(['logout']),
            bindLogin() {
                uni.navigateTo({
                    url: '../login/login',
                });
            },
            bindLogout() {
                this.logout();
                /**
                 * 如果需要强制登录跳转回登录页面
                 */
                if (this.forcedLogin) {
                    uni.reLaunch({
                        url: '../login/login',
                    });
                }
            },
            goDetail(e) {
                /*uni.navigateTo({
                    url: '/pages/tabbar/detail/detail?title=' + e.title
                });*/
                console.log(e)
                /*uni.reLaunch({
                    url: '/pages/tabbar/detail/detail?title=' + e.title
                });*/
            },
            close(index1, index2) {
                uni.showModal({
                    content: '是否删除本条信息？',
                    success: (res) => {
                        if (res.confirm) {
                            this.newsitems[index1].data.splice(index2, 1);
                        }
                    }
                })
            },
            loadMore(e) {
                /*setTimeout(() => {
                    this.addData(e);
                }, 1200);*/
                this.addData(e)
            },
            addData(e) {
                if (this.newsitems[e].data.length > 30) {
                    this.newsitems[e].loadingText = '没有更多了';
                    return;
                }
                for (let i = 1; i <= 5; i++) {
                    this.newsitems[e].data.push(tpl['data' + Math.floor(Math.random() * 5)]);
                }
            },
            async changeTab(e) {
                let index = e.target.current;
                // console.log(this.newsitems)
                if (this.newsitems[index].data.length === 0) {
                    this.addData(index)
                }
                // console.log(this.isClickChange)
                if (this.isClickChange) {
                    this.tabIndex = index;
                    this.isClickChange = false;
                    return;
                }
                let tabBar = await this.getElSize("tab-bar"),
                    tabBarScrollLeft = tabBar.scrollLeft;
                let width = 0;

                for (let i = 0; i < index; i++) {
                    let result = await this.getElSize(this.tabBars[i].id);
                    width += result.width;
                }
                let winWidth = uni.getSystemInfoSync().windowWidth,
                    nowElement = await this.getElSize(this.tabBars[index].id),
                    nowWidth = nowElement.width;
                if (width + nowWidth - tabBarScrollLeft > winWidth) {
                    this.scrollLeft = width + nowWidth - winWidth;
                }
                if (width < tabBarScrollLeft) {
                    this.scrollLeft = width;
                }
                this.isClickChange = false;
                this.tabIndex = index; //一旦访问data就会出问题
                // console.log(this.tabIndex)
            },
            getElSize(id) { //得到元素的size
                return new Promise((res, rej) => {
                    uni.createSelectorQuery().select("#" + id).fields({
                        size: true,
                        scrollOffset: true
                    }, (data) => {
                        res(data);
                    }).exec();
                })
            },
            async tapTab(e) { //点击tab-bar
                let tabIndex = e.target.dataset.current;
                if (this.newsitems[tabIndex].data.length === 0) {
                    this.addData(tabIndex)
                }
                if (this.tabIndex === tabIndex) {
                    return false;
                } else {
                    let tabBar = await this.getElSize("tab-bar"),
                        tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
                    this.scrollLeft = tabBarScrollLeft;
                    this.isClickChange = true;
                    this.tabIndex = tabIndex;
                }
            },
            randomfn() {
                let ary = [];
                for (let i = 0, length = this.tabBars.length; i < length; i++) {
                    let aryItem = {
                        loadingText: '加载更多...',
                        data: []
                    };
                    if (i < 1) {
                        for (let j = 1; j <= 10; j++) {
                            aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
                        }
                    }
                    ary.push(aryItem);
                }
                return ary;
            },
            getCode(){
                uni.request()
            }
        }
    }
</script>

<style>
    .uni-tab-bar-loading {
        text-align: center;
        font-size: 28upx;
        color: #999;
    }
    .swiper-box {
        /*height: calc(100% - 50upx);*/
        height: 1000upx;
    }
</style>
